<template>
    <div class="login-wrap">
        <el-form class="login-container" :model="user">
          <h1 class="title">用户登录</h1>
          <el-form-item >
            <el-input type="text" v-model="user.username"  placeholder="用户账号" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item >
            <el-input type="password" v-model="user.password" placeholder="用户密码" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doLogin" style="width: 100%;">登录</el-button>
          </el-form-item>
          <el-row style="text-align: center;margin-top: -10px;">
              <el-link type="primary" @click="doRegister" >还没有账号？去注册</el-link>
          </el-row>
        </el-form>
    </div>
  </template>
   
  <script>
    export default{
      name:'Login',
      data:function(){
        return {
          user: {
          username:'',
          password:''
         }
       }
      },
      methods:{
        doLogin:function(){
          //发起ajax请求-GET(注意参数必须保存到params属性中)
          this.request.get("/user/login",{params:this.user}).then((response) => {
                            const res = response.data
                            const _this = this
                            console.log(res.code)
                            if (res.code === '200' || res.code === 200) {
                                const token = response.headers['authorization']
                                // const token = localStorage.getItem("token")
                                console.log(res)
                                _this.$store.commit('SET_TOKEN',token)//存储token
                                _this.$store.commit('SET_USERINFO',res.data)//存储用户信息
                                _this.$router.push('/') 
                                _this.$message.success("登录成功!")
                            } else {
                                _this.$message.error("用户名或密码错误！")
                            }
                        }).catch(err=>{
                    console.log(err);
          })
        },
        doRegister:function(){
          this.$router.push('/Register')
        }
      }
    }
  </script>
   
  <style>
        .login-wrap {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            padding-top: 5%;
            background-image: url("../../assets/Register.jpg");
            padding: 15%;
        }
   
        .login-container {
            border-radius: 10px;
            margin: 0px auto;
            width: 300px;
            padding: 30px 35px 15px 35px;
            background: #fff;
            border: 1px solid #eaeaea;
            text-align: left;
            box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
        }
   
        .title {
            margin: 0px auto 40px auto;
            text-align: center;
            color: #505458;
        }
  </style>